<template>
  <div>
    <div class='cell-group' v-for='(item,index) in reviewDetail' :key='index'>
     <div class='cell-top'>
       <span><img class='cell-img' :src="imgUrls + '/file/'+ item.avatar" /></span>
       <span class='cell-name'>{{item.nickname}}</span>
       <span class='cell-score'>
        <van-rate size='1px' gutter='14px' v-model=item.productScore /></span>
       <span class='cell-sku'>产品规格:{{item.sku}}</span>
     </div>
    <div class='cell-time'>
      评论时间: {{item.createTime}}
    </div>
      <div class='cell-review'>
        {{item.comment}}
      </div>
      <div class='cell-review-img' >
        <van-image 
        v-if="item.picturesArr.length>0" v-for='(item1,index1) in item.picturesArr' :key='index1'
          width=60px
          height=60px
          fit="contain"
          :src=item1
        >
          <template  v-if="item.picturesArr.length==0"  v-slot:error>暂无图片</template>

        </van-image>
      </div>
    </div>

  </div>
</template>

<script>
import { getReview } from 'api/review'

export default {
  name: 'reviewDetail',
  data() {
    return {
      proId: '',
      reviewDetail: [],
      imgUrls: this.$baseApi,
      isShowImg:false,
      hasReview:false
    }
  },
  methods: {
    getReview(id) {
      getReview(id).then(res => {
        this.reviewDetail = res.data
      })
    },
    // isShow(){
    //   for (let i = 0; i < this.reviewDetail.length; i++) {
    //        if (this.reviewDetail[i].pictures != ''){
    //         this.isShowImg = true
    //        }
    //   }
    // }
  },
  created() {
    this.$Bus.$on('productId', (data) => {
      this.proId = data
    })
  },
  mounted() {
    this.getReview(this.proId)
    // this.isShow()
  },
  beforeDestroy() {
    this.$Bus.$off('productId')
  }

}
</script>

<style scoped>
.cell-group{
  margin-top: 10px;
  margin-left: 8%;
  border-radius: 10px;
  height: 150px;
  width: 84%;
  background-color: #fff;
}
.cell-top{
  height: 40px;

}
.cell-img{
  margin-top: 15px;
  margin-left: 15px;
  width: 32px;
  height: 32px;
  position: absolute;
 }

.cell-name{
  margin-top: 5.5%;
  margin-left: 15%;
  position: absolute;
}
.cell-score{
  position: absolute;
  margin-top: 9%;
  margin-left: 14%;
}

.cell-time{
  margin-top: 3%;
  margin-left: 5%;
  font-size: 8px;
  color: #82848f;
}
.cell-review{
  margin-top: 3%;
  margin-left: 5%;
}
.cell-sku{
  position: absolute;
  margin-top: 8.8%;
  margin-left: 40%;
}
.cell-review-img{
  position: relative;
  margin-left: 5%;
}
</style>
